<template>
    <mescroll-uni
        ref="mescrollRef"
        top="80rpx"
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
        :down="downOption"
        :up="upOption"
    >
        <view class="order-list">
            <view
                v-for="(item, index) in orderList"
                :key="index"
                class="order-item bg-white m-t-20"
            >
                <router-link
                    :to="{
                        path: '/bundle/pages/order_details/order_details',
                        query: { id: item.id }
                    }"
                >
                    <view class="order-header flex row-between">
                        <view class="flex">
                            <view v-if="item.order_type == 1" class="m-r-10">
                                <u-tag text="秒杀" size="mini" type="primary" mode="plain" />
                            </view>
                            <view v-if="item.order_type == 2" class="m-r-10">
                                <u-tag text="拼团" size="mini" type="primary" mode="plain" />
                            </view>
                            <view v-if="item.order_type == 3" class="m-r-10">
                                <u-tag text="砍价" size="mini" type="primary" mode="plain" />
                            </view>
                            <view v-if="item.delivery_type == 2" class="m-r-10">
                                <u-tag text="自提" size="mini" type="success" mode="dark" />
                            </view>
                        </view>
                        <shop-title :shop="item.shop"></shop-title>
                        <view
                            :class="item.order_status == 4 ? 'muted' : 'primary'"
                            v-if="item.pay_way != 4"
                        >
                            <template v-if="item.delivery_type != 2">
                                {{ getOrderStatus(item.order_status) }}
                            </template>
                            <template v-else>
                                {{ item.order_status_desc }}
                            </template>
                        </view>
                        <view :class="item.order_status == 4 ? 'muted' : 'primary'" v-else>
                            <template v-if="item.order_status == 0"> 线下支付 </template>
                            <template v-else>
                                <template v-if="item.delivery_type != 2">
                                    {{ getOrderStatus(item.order_status) }}
                                </template>
                                <template v-else>
                                    {{ item.order_status_desc }}
                                </template>
                            </template>
                        </view>
                    </view>
                    <view class="order-con">
                        <order-goods :list="item.order_goods" :isJumpGoods="false"></order-goods>
                        <view
                            class="m-20 p-20"
                            style="background-color: #f6f6f6; border-radius: 5px"
                            v-if="orderstatusText(item)"
                            ><span class="m-r-24">{{ orderstatusTitle(item) }}</span
                            ><span class="muted">{{ orderstatusText(item) }}</span>
                        </view>
                        <view class="all-price flex row-right">
                            <text class="muted xs"
                                >共{{ handlegoodCount(item) }}件商品，实付款：</text
                            >
                            <price-format
                                weight="500"
                                :subscript-size="30"
                                :first-size="30"
                                :second-size="30"
                                :price="item.order_amount"
                            ></price-format>
                        </view>
                    </view>
                    <view
                        class="order-footer flex"
                        v-if="
                            item.cancel_btn ||
                            item.delivery_btn ||
                            item.take_btn ||
                            item.del_btn ||
                            item.pay_btn ||
                            item.comment_btn ||
                            item.pickup_btn
                        "
                    >
                        <view style="flex: 1">
                            <view
                                class="primary flex sm"
                                v-if="getCancelTime(item.order_cancel_time) > 0"
                            >
                                <u-count-down
                                    separator="zh"
                                    :timestamp="getCancelTime(item.order_cancel_time)"
                                    :separator-color="colorConfig.primary"
                                    :color="colorConfig.primary"
                                    :separator-size="26"
                                    :font-size="26"
                                    bg-color="transparent"
                                    @end="refresh"
                                ></u-count-down>
                            </view>
                        </view>
                        <view v-if="item.cancel_btn">
                            <button
                                size="sm"
                                class="plain br60 lighter"
                                hover-class="none"
                                @tap.stop="cancelOrder(item.id)"
                            >
                                取消订单
                            </button>
                        </view>
                        <view v-if="item.delivery_btn" @tap.stop="">
                            <router-link
                                :to="{
                                    path: '/bundle/pages/goods_logistics/goods_logistics',
                                    query: { id: item.id }
                                }"
                            >
                                <button size="sm" class="btn plain br60 lighter" hover-class="none">
                                    查看物流
                                </button>
                            </router-link>
                        </view>
                        <view v-if="item.content_btn" @tap.stop="" class="m-l-20">
                            <router-link
                                :to="{
                                    path: '/bundle/pages/order_details/order_details',
                                    query: { id: item.id }
                                }"
                            >
                                <button size="sm" class="btn plain br60 lighter" hover-class="none">
                                    查看内容
                                </button>
                            </router-link>
                        </view>
                        <view v-if="item.pickup_btn" @tap.stop="" class="m-l-20">
                            <router-link
                                :to="{
                                    path: '/bundle/pages/order_details/order_details',
                                    query: { id: item.id }
                                }"
                            >
                                <button
                                    size="sm"
                                    class="btn bg-primary plain br60 white"
                                    style="border: none"
                                    hover-class="none"
                                >
                                    查看取货码
                                </button>
                            </router-link>
                        </view>
                        <view v-if="item.del_btn">
                            <button
                                size="sm"
                                class="btn plain br60 lighter"
                                hover-class="none"
                                @tap.stop="delOrder(item.id)"
                            >
                                删除订单
                            </button>
                        </view>
                        <view v-if="item.pay_btn && item.pay_way != 4" class="m-l-20">
                            <button
                                size="sm"
                                class="btn bg-primary br60 white"
                                @tap.stop="payNow(item.id)"
                            >
                                立即付款
                            </button>
                        </view>
                        <view v-if="item.comment_btn" class="m-l-20">
                            <button
                                size="sm"
                                hover-class="none"
                                class="btn plain btn br60 primary red"
                            >
                                去评价
                            </button>
                        </view>
                        <view v-if="item.take_btn" class="m-l-20">
                            <button
                                size="sm"
                                class="btn plain br60 primary red"
                                hover-class="none"
                                @tap.stop="comfirmOrder(item.id, item.pay_way_base)"
                            >
                                确认收货
                            </button>
                        </view>
                    </view>
                </router-link>
            </view>
        </view>
        <order-dialog
            ref="orderDialog"
            :order-id="orderId"
            :type="type"
            @confirm="confirmDialog"
        ></order-dialog>
        <loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
    </mescroll-uni>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js'

import {
    getOrderList,
    cancelOrder,
    delOrder,
    confirmOrder,
    getwxReceiveDetail,
    getwechatSyncCheck
} from '@/api/order'
import { compareWeChatVersion } from '@/utils/tools'

export default {
    mixins: [MescrollMixin, MescrollMoreItemMixin],
    data() {
        return {
            orderList: [],
            downOption: {
                auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
            },
            upOption: {
                auto: false, // 不自动加载
                noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                empty: {
                    icon: '/static/images/order_null.png',
                    tip: '暂无订单~', // 提示
                    fixed: true
                }
            },
            showCancel: false,
            type: 0,
            orderId: '',
            showLoading: false,
            pay_way: ''
        }
    },
    props: {
        orderType: {
            type: String
        }
    },
    created() {
        uni.$on('refreshorder', () => {
            this.refresh()
        })

        uni.$on('payment', (params) => {
            setTimeout(() => {
                if (params.result) {
                    this.$toast({ title: '支付成功' })
                    this.refresh()
                } else {
                    this.$toast({ title: '支付失败' })
                }
            }, 500)
        })
    },
    destroyed() {
        uni.$off('payment')
        uni.$off('refreshorder')
    },
    methods: {
        orderstatusTitle(orderItem) {
            switch (orderItem.order_status) {
                case 0:
                    if (orderItem.pay_way == 4) {
                        return '线下付款'
                    } else {
                        return '待支付'
                    }
                case 1:
                    if (orderItem.order_type == 2) {
                        return '拼团中'
                    } else if (orderItem.delivery_type == 2) {
                        return '待取货'
                    } else {
                        return '待发货'
                    }
                case 2:
                    return '待收货'
                default:
                    return ''
            }
        },
        orderstatusText(orderItem) {
            switch (orderItem.order_status) {
                case 0:
                    if (orderItem.pay_way == 4) {
                        return '如已付款，请通知商家【确认收款】'
                    } else {
                        return '订单待支付'
                    }
                case 1:
                    if (orderItem.order_type == 2 && orderItem.is_team_success == 0) {
                        return '拼团成功后发货'
                    } else if (orderItem.delivery_type == 2) {
                        return '请前往指定门店取货'
                    } else if (orderItem.order_type == 5) {
                        return orderItem.presell.order_send_text
                    } else {
                        return '商品准备中'
                    }
                case 2:
                    return '待确认收货'
                default:
                    return ''
            }
        },
        async confirmDialog() {
            const { type, orderId } = this
            let res = null
            switch (type) {
                case 0:
                    res = await cancelOrder(orderId)
                    break

                case 1:
                    res = await delOrder(orderId)
                    break

                case 2:
                    res = await confirmOrder(orderId)
                    break
            }

            if (res.code == 1) {
                this.refresh()
                this.$toast({
                    title: res.msg
                })
            }
        },
        dialogOpen() {
            this.$refs.orderDialog.open()
        },
        refresh() {
            this.mescroll.resetUpScroll()
        },
        delOrder(id) {
            this.orderId = id
            this.type = 1
            this.$nextTick(() => {
                this.dialogOpen()
            })
        },
        // 小程序确认收货
        comfirmReceive(transaction_id) {
            return new Promise((resolve, reject) => {
                wx.openBusinessView({
                    businessType: 'weappOrderConfirm',
                    extraData: {
                        transaction_id
                    },
                    success({ extraData }) {
                        if (extraData.status == 'success') {
                            resolve('确认收货')
                        } else {
                            resolve('取消收货')
                        }
                    },
                    fail(err) {
                        reject(err)
                    }
                })
            })
        },
        //查询是否收货成功
        querycomfirmReceive(id) {
            return new Promise((resolve, reject) => {
                getwechatSyncCheck({ id })
                    .then(({ data }) => {
                        if (data.order.order_state === 4) {
                            resolve('已确认收货')
                        } else {
                            reject('未确认收货')
                        }
                    })
                    .catch((err) => {
                        reject(err)
                    })
            })
        },
        comfirmOrder(id, pay_way_base) {
            this.orderId = id
            this.pay_way = pay_way_base
            this.type = 2
            this.$nextTick(async () => {
                // #ifdef MP-WEIXIN
                //未开启发货管理无需调用小程序同步发货API
                if (!this.$store.state.app.config.mini_express_send_sync) {
                    return this.dialogOpen()
                }
                let res = {}
                if (this.pay_way === 1) {
                    res = await getwechatSyncCheck({ id: this.orderId })
                    console.log(res)
                }
                if (
                    compareWeChatVersion('2.6.0') === 1 &&
                    wx.openBusinessView &&
                    this.pay_way === 1 &&
                    res.data.order.order_state !== 1
                ) {
                    try {
                        const { data } = await getwxReceiveDetail({
                            order_id: this.orderId
                        })
                        await this.comfirmReceive(data.transaction_id)
                        await this.querycomfirmReceive(this.orderId)
                        await confirmOrder(this.orderId)
                    } catch (error) {
                        console.log(error)
                    }
                    this.refresh()
                } else {
                    this.dialogOpen()
                }
                // #endif

                // #ifndef MP-WEIXIN
                this.dialogOpen()
                // #endif
            })
        },

        cancelOrder(id) {
            this.orderId = id
            this.type = 0
            this.$nextTick(() => {
                this.dialogOpen()
            })
        },

        payNow(id) {
            uni.navigateTo({
                url: `/pages/payment/payment?from=${'order'}&order_id=${id}`
            })
        },
        handlegoodCount(item) {
            let count = 0
            item.order_goods.forEach((i) => {
                count += i.goods_num
            })
            return count
        },

        upCallback(page) {
            let pageNum = page.num // 页码, 默认从1开始
            let pageSize = page.size // 页长, 默认每页10条
            let { orderType } = this
            getOrderList({
                page_size: pageSize,
                page_no: pageNum,
                type: orderType
            }).then(({ data }) => {
                let curPageData = data.list
                let curPageLen = curPageData.length
                let hasNext = !!data.more
                if (page.num == 1) this.orderList = []
                this.orderList = this.orderList.concat(curPageData)
                this.mescroll.endSuccess(curPageLen, hasNext)
            })
        }
    },
    computed: {
        getOrderStatus() {
            return (status) => {
                let text = ''
                switch (status) {
                    case 0:
                        text = '待支付'
                        break
                    case 1:
                        text = '待发货'
                        break
                    case 2:
                        text = '待收货'
                        break
                    case 3:
                        text = '已完成'
                        break
                    case 4:
                        text = '订单已关闭'
                        break
                }
                return text
            }
        },
        getCancelTime() {
            return (time) => time - Date.now() / 1000
        }
    }
}
</script>
<style lang="scss">
.order-list {
    min-height: calc(100vh - 80rpx);
    padding: 0 20rpx;
    overflow: hidden;

    .order-item {
        border-radius: 10rpx;

        .order-header {
            height: 80rpx;
            padding: 0 24rpx;
            border-bottom: 1px dotted #e5e5e5;
        }

        .all-price {
            text-align: right;
            padding: 0 24rpx 20rpx;
        }

        .order-footer {
            height: 100rpx;
            border-top: $-solid-border;
            padding: 0 24rpx;

            .plain {
                border: 1px solid #bbbbbb;

                &.red {
                    border-color: $-color-primary;
                }
            }
        }
    }
}
</style>
